<template>
  <div>
    <swiper loop auto :list="swiperImage" :aspect-ratio="580/800"></swiper>
    <grid :show-lr-borders="false" :show-vertical-dividers="false">
      <grid-item @on-item-click="getBatch" label="考试报名">
        <img slot="icon" src="../assets/img/home_icon_1.png">
      </grid-item>
      <grid-item link="/Score" label="成绩查询">
        <img slot="icon" src="../assets/img/home_icon_2.png">
        <badge class="grid_badge" :text="count" v-show="count!=0"></badge>
      </grid-item>
      <grid-item link="/History" label="报名查询">
        <img slot="icon" src="../assets/img/home_icon_3.png">
      </grid-item>
    </grid>
    <grid :show-lr-borders="false" :show-vertical-dividers="false">
      <grid-item link="/Subject" label="科目介绍">
        <img slot="icon" src="../assets/img/home_icon_4.png">
      </grid-item>
      <grid-item link="/Authorization" label="授权委托">
        <img slot="icon" src="../assets/img/home_icon_5.png">
      </grid-item>
      <grid-item link="/Certificate" label="证书对照">
        <img slot="icon" src="../assets/img/home_icon_6.png">
      </grid-item>
    </grid>
    <toast v-model="showToast" type="text" width="15em" position="bottom" :time="1000" text="再按一次退出应用程序"></toast>
  </div>
</template>
<script>
import { Swiper, Badge, Grid, GridItem, cookie, Toast } from "vux";
export default {
  components: {
    Swiper,
    Badge,
    Grid,
    GridItem,
    Toast
  },
  data() {
    return {
      swiperImage: [],
      count: 0,
      showToast: false,
      first: null
    };
  },
  created: function() {
    const vm = this;
    vm.getSwiper();
    if (history.length == 1) {
      vm.$store.commit("SET_USER_ID", vm.$route.query.userId);
    }
    vm.getExamNoRead();
    vm.$bridge.registerhandler("jsCloseWebPage", (data, responseCallback) => {
      const vm = this;
      let returnNum = 0;

      if (!vm.first) {
        vm.first = new Date().getTime(); //记录第一次按下回退键的时间
        vm.showToast = true;
        setTimeout(function() {
          //2s中后清除
          vm.first = null;
        }, 2000);
      } else {
        if (new Date().getTime() - vm.first < 2000) {
          returnNum = 1
        } 
      }
      responseCallback(returnNum);
    });
  },
  methods: {
    getSwiper: function() {
      const vm = this;
      this.$api
        .getAllShow()
        .then(response => {
          for (let i = 0; i < response.length; i++) {
            (response[i].url = "News/" + response[i].id),
              (response[i].img = response[i].bannerUrl),
              (response[
                i
              ].fallbackImg = require("../assets/img/banner_default.png"));
          }
          vm.swiperImage = response;
        })
        .catch(err => {
          console.log("获取首页轮播图发生异常");
        });
    },
    getBatch: function() {
      const vm = this;
      this.$api
        .getBatch()
        .then(response => {
          if (!response) {
            vm.$vux.alert.show({
              content: "暂无可以报名的考试"
            });
          } else {
            // 设置报名批次
            vm.$store.commit("SET_BATCH_ID", response.id);
            vm.checkCount();
          }
        })
        .catch(err => {
          console.log("获取激活的报名批次发生异常");
        });
    },
    checkCount: function() {
      const vm = this;
      this.$api
        .checkCount(vm.$store.getters.userId)
        .then(response => {
          const count = response.count;
          if (count != 0) {
            vm.$vux.alert.show({
              content: "您的报名次数超过" + count + "次"
            });
          } else {
            // 跳转
            vm.$router.push("/Login");
          }
        })
        .catch(err => {
          console.log("获取报名次数发生异常");
        });
    },
    getExamNoRead: function() {
      const vm = this;
      this.$api
        .getExamNoRead({ openid: vm.$store.getters.userId })
        .then(response => {
          vm.count = response.count;
        })
        .catch(err => {
          console.log("获取未读成绩发生异常");
        });
    }
  }
  // beforeRouteLeave (to, from, next) {
  //   const vm = this;
  //   if (vm.back) {
  //     if (!this.first) {
  //       this.first = new Date().getTime(); //记录第一次按下回退键的时间
  //       this.showToast = true;
  //       setTimeout(function() {
  //         //1s中后清除
  //         this.first = null;
  //       }, 1000);
  //     } else {
  //       if (new Date().getTime() - first < 1000) {
  //       }
  //     }
  //     next(false)
  //   } else {
  //     next()
  //   }
  // }
};
</script>
<style scoped lang="less">
.weui-grids:before {
  border-top: 0px solid #d9d9d9;
}
.weui-grid__icon img {
  width: 32px;
  height: 32px;
}
.grid_badge {
  position: absolute;
  top: 12px;
  left: 65%;
  transform: translateX(-50%);
  z-index: 101;
}
.vux-cell-value {
  color: black;
}
</style>
